<script lang="ts" setup>
import { ref, Ref } from 'vue'

const bgTop = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/bg_top.png"
const bgCard = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/bg_card.png"
const advertis = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/advertis.png"
const advertis_2 = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/advertis_2.png"
const unSel = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/un_sel.png"
const inSel = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/sel.png"
const icon1 = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/icon_1.png"
const label = "https://shq.qdjqy.cn/profile/0911/annualCardBuy/label.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

let tab = ref<number>(0)

const getSrc = computed(() => {
  return (index:number) => {
    console.log(index, 'index', tab.value)
    if(index === tab.value) return inSel
    else return unSel
  }
})
function change_tab(index: number) {
  tab.value = index
  console.log(index, 'innnnn', tab)
}
</script>

<template>
  <view class="suggest-container">
    <image class="bg-img" :src="bgTop" mode="aspectFill" />
    <image class="bg-card" :src="bgCard" mode="aspectFit" />
    <wd-navbar left-text="年卡购买" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <view class="title"></view>
    <view class="select flex">
      <view class="wrapper" v-for="(item, index) in 3" :key="index" @click="change_tab(index)">
        <image :src="getSrc(index)" mode="scaleToFill" class="bg-img1"></image>
        <veiw class="title1" :class="{'tit-color': tab==index}">单人卡</veiw>
        <veiw class="price1" :class="{'tit-color': tab==index}">￥239</veiw>
        <view class="select-icon" v-if="index==1||index==2">
          <image class="select-img" :src="label"></image>
          <span class="select-title" v-if="index == 1">情侣卡</span>
          <span class="select-title" v-if="index == 2">家庭卡</span>
        </view>
      </view>
    </view>

    <view class="advertising">
      <view class="head flex">
        <image class="icon_head" :src="icon1"></image>
        <view class="title2">游玩权益说明</view>
      </view>
      <image class="img_detail" :src="advertis" mode="widthFix"></image>
      <image class="img_detail" :src="advertis_2" mode="widthFix"></image>
    </view>

    <veiw class="bottom1">
      <wd-button type="error" custom-class="custom-shadow">同意协议并支付 ￥<span class="price">239</span></wd-button>
    </veiw>
  </view>
</template>

<style lang="scss" scoped>
.suggest-container {
  position: relative;
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 500rpx;
    z-index: -3; 
    vertical-align: top;
  }
  & .bg-card {
    position: absolute;
    top: 180rpx;
    left: 90rpx;
    width: 570rpx;
    height: 320rpx;
    z-index: -2; 
    vertical-align: top;
  }
  & .title {
    margin-top: 300rpx;
    width: 750rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
    height: 30rpx;
  }

  & .select {
    width: 690rpx;
    margin: 20rpx 30rpx;
    height: 210rpx;
    justify-content: space-between;
    & .wrapper {
      width: 210rpx;
      height: 210rpx;
      position: relative;
      & .bg-img1 {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
        width: 210rpx;
        height: 210rpx;
      }
      & .title1 {
        position: absolute;
        left: 0;
        top: 65rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 38rpx;
        font-weight: 700;
        width: 200rpx;
        text-align: center;
        color: #222222;
      }
      & .price1 {
        position: absolute;
        left: 0;
        bottom: 20rpx;
        line-height: 60rpx;
        font-weight: 700;
        text-align: center;
        font-size: 38rpx;
        color: #222222;
        width: 200rpx;
      }

      & .select-icon {
        position: relative;
        left: 0;
        top: 0;
        width: 100rpx;
        text-align: center;
        & .select-img {
          position: absolute;
          left: 0;
          top: 0;
          z-index: -1;
          width: 100rpx;
          height: 40rpx;
        }
        & .select-title {
          line-height: 40rpx;
          text-align: center;
          font-size: 22rpx;
          color: #fff;
          width: 100rpx;
        }
      }
      & .tit-color {
        color: #6D2E19;;
      }
    }
  }
  & .bottom1 {
    :deep() {
      .custom-shadow {
        margin: 50rpx 30rpx;
        height: 90rpx;
        width: 690rpx;
        font-size: 28rpx;
        .price {
          font-size: 40rpx;
          line-height: 34rpx;
        }
      }
    }
  }

  & .advertising {
    & .head {
      width: 690rpx;
      margin: 0 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      & .icon_head {
        width: 34rpx;
        height: 30rpx;
        margin-top: 26rpx;
      }
      & .title2 {
        color: #232120;
        font-weight: 700;
        margin-left: 10rpx;
      }
    }
    & .img_detail {
      width: 690rpx;
      margin: 0 30rpx;
    }
  }
 
}
</style>
